<template>
  <div class="echart-item">
    <div id="echart" style="width:700px;height:500px;"></div>
    <div class="legend">
      <p>
        <span class="this-me"></span>本我 <span class="relay-me"></span>现实的我
      </p>
    </div>
    <div class="d-item item">D</div>
    <div class="i-item item">I</div>
    <div class="s-item item">S</div>
    <div class="c-item item">C</div>
  </div>
</template>
<script>
import Echarts from 'echarts'
export default {
  data() {
    return {}
  },
  props: {
    thisScore: {
      type: Number,
      default: 1
    },
    realityMe: {
      type: Number,
      default: 2
    }
  },
  created() {
    this.$nextTick(() => {
      this.setEchartData()
      // this.loadEchart()
    })
  },
  mounted() {
    let _this = this
    window.onresize = function() {
      _this.myChart.resize()
    }
  },
  methods: {
    setEchartData() {
      var data = [
        [
          { value: 1, name: '57' },
          { value: 1, name: '58' },
          { value: 1, name: '59' },
          { value: 1, name: '60' }
        ],
        [
          { value: 1, name: '41' },
          { value: 1, name: '42' },
          { value: 1, name: '43' },
          { value: 1, name: '44' },
          { value: 1, name: '45' },
          { value: 1, name: '46' },
          { value: 1, name: '47' },
          { value: 1, name: '48' },
          { value: 1, name: '49' },
          { value: 1, name: '50' },
          { value: 1, name: '51' },
          { value: 1, name: '52' },
          { value: 1, name: '53' },
          { value: 1, name: '54' },
          { value: 1, name: '55' },
          { value: 1, name: '56' }
        ],
        [
          { value: 1, name: '25' },
          { value: 1, name: '26' },
          { value: 1, name: '27' },
          { value: 1, name: '28' },
          { value: 1, name: '29' },
          { value: 1, name: '30' },
          { value: 1, name: '31' },
          { value: 1, name: '32' },
          { value: 1, name: '33' },
          { value: 1, name: '34' },
          { value: 1, name: '35' },
          { value: 1, name: '36' },
          { value: 1, name: '37' },
          { value: 1, name: '38' },
          { value: 1, name: '39' },
          { value: 1, name: '40' }
        ],
        [
          {
            value: 1,
            name: '9'
          },
          { value: 1, name: '10' },
          { value: 1, name: '11' },
          { value: 1, name: '12' },
          { value: 1, name: '13' },
          { value: 1, name: '14' },
          { value: 1, name: '15' },
          { value: 1, name: '16' },
          { value: 1, name: '17' },
          { value: 1, name: '18' },
          { value: 1, name: '19' },
          { value: 1, name: '20' },
          { value: 1, name: '21' },
          { value: 1, name: '22' },
          { value: 1, name: '23' },
          { value: 1, name: '24' }
        ],
        [
          { value: 1, name: '1' },
          { value: 1, name: '2' },
          { value: 1, name: '3' },
          { value: 1, name: '4' },
          { value: 1, name: '5' },
          { value: 1, name: '6' },
          { value: 1, name: '7' },
          { value: 1, name: '8' }
        ]
      ]
      let len = data.length
      for (var i = 0; i < len; i++) {
        for (var k = 0; k < data[i].length; k++) {
          if (data[i][k].name == this.realityMe) {
            data[i][k].itemStyle = { color: '#5EA25E' }
          }
          if (data[i][k].name == this.thisScore) {
            data[i][k].itemStyle = { color: '#DD2248' }
          }
        }
      }
      this.loadEchart(data)
    },

    loadEchart(data) {
      this.myChart = Echarts.init(document.getElementById('echart'))
      this.myChart.setOption({
        series: [
          {
            name: '分数',
            type: 'pie',
            radius: ['0%', '20%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              position: 'inside',
              color: '#333'
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              color: '#EEE',
              borderColor: '#666'
            },
            data: data[0]
          },
          {
            name: '分数',
            type: 'pie',
            radius: ['20%', '40%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              position: 'inside',
              color: 'block'
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              color: '#EEE',
              borderColor: '#666'
            },
            data: data[1]
          },
          {
            name: '分数',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              position: 'inside',
              color: 'block'
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              color: '#EEE',
              borderColor: '#666'
            },
            data: data[2]
          },
          {
            name: '分数',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              position: 'inside',
              color: 'block'
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              color: '#EEE',
              borderColor: '#666'
            },
            data: data[3]
          },
          {
            name: '分数',
            type: 'pie',
            radius: ['75%', '85%'],
            avoidLabelOverlap: false,
            avoidLabelOverlap: false,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              position: 'inside',
              color: 'block'
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              color: '#EEE',
              borderColor: '#666'
            },
            data: data[4]
          },
          {
            name: '分数',
            type: 'pie',
            radius: ['90%', '100%'],
            avoidLabelOverlap: false,
            avoidLabelOverlap: false,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              position: 'outside',
              color: 'block'
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              borderColor: '#666'
            },
            data: [
              {
                value: 1,
                name: 'Dniver',
                itemStyle: { color: '#C41E34' }
              },
              {
                value: 1,
                name: 'Influencer',
                itemStyle: { color: '#F3BE34' }
              },
              {
                value: 1,
                name: 'Accommodator',
                itemStyle: { color: '#196F40' }
              },
              {
                value: 1,
                name: 'Analyzer',
                itemStyle: { color: '#1A598E' }
              }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.echart-item {
  height: 530px;
  position: relative;
  .legend {
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0;
    line-height: 25px;
    text-align: center;
    .this-me {
      display: inline-block;
      width: 30px;
      height: 15px;
      background: #dd2248;
      border-radius: 5px;
      margin: 0 5px;
    }
    .relay-me {
      display: inline-block;
      width: 30px;
      height: 15px;
      background: #5ea25e;
      border-radius: 5px;
      margin: 0 5px;
    }
  }
  .item {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background: #333;
    color: #fff;
    position: absolute;
    font-size: 30px;
    line-height: 80px;
    text-align: center;
  }
  .d-item {
    top: 20px;
    right: 15px;
    background: #c41e34;
  }
  .i-item {
    bottom: 20px;
    right: 0px;
    background: #f3be34;
  }
  .s-item {
    bottom: 5px;
    left: 0px;
    background: #196f40;
  }
  .c-item {
    top: 20px;
    left: 0px;
    background: #1a598e;
  }
}
</style>
